import { View, Text, Image } from "@tarojs/components";
import Taro, { useLoad } from "@tarojs/taro";
import { useState } from "react";
import "./index.scss";
import noticebar from "../../static/icon/noticebar.png";
import header_img from "../../static/header_img.png";
import name_bgc from "../../static/name_bgc.png";
import mascot from "../../static/mascot.png";
import logo from "../../static/logo.png";

import { mobileData } from "../../api/home/index";

export default function Index() {
  const [netList, setNetList] = useState<any[]>([
    { id: 1, professional: "动环网", kpiValue: 0, kpiName: "" },
    { id: 2, professional: "传输网", kpiValue: 0, kpiName: "" },
    { id: 3, professional: "大区网络云", kpiValue: 0, kpiName: "" },
  ]);
  const [bizList, setBizList] = useState<any[]>([
    { id: 4, professional: "核心网", kpiValue: 0, kpiName: "" },
    { id: 5, professional: "无线网", kpiValue: 0, kpiName: "" },
    { id: 6, professional: "有线宽带", kpiValue: 0, kpiName: "" },
    { id: 7, professional: "网络投诉", kpiValue: 0, kpiName: "" },
  ]);
  const [ais, setAis] = useState<any>({});
  useLoad(() => {
    console.log("Page loaded.");
    getinit();
  });

  const getinit = async () => {
    try {
      const res = await mobileData();
      const net = res.data.filter((item) =>
        ["动环网", "传输网", "大区网络云"].includes(item.professional)
      );
      const biz = res.data.filter((item) =>
        ["核心网", "无线网", "有线宽带", "网络投诉"].includes(item.professional)
      );
      setNetList(net);
      setBizList(biz);
      setAis(res.ais || {});
    } catch (e) {
      // 请求失败时，保持默认卡片
      setAis({});
    }
  };

  const gochat = () => {
    const query = encodeURIComponent(JSON.stringify(ais));
    Taro.navigateTo({
      url: `/pages/chat/index?ais=${query}`,
    });
  };

  return (
    <View className="page">
      <View className="header_name">
        <Image className="header_img" src={header_img}></Image>
        <Image className="logo" src={logo}></Image>
        <Text className="header_text">智慧大厅交互牌</Text>
      </View>

      <View className="content">
        <View className="noticebar">
          <Image className="noticebar_img" src={noticebar} />
        </View>

        <View className="h_title">
          <Text className="h_title_text">网络运行情况</Text>
          <Image className="h_title_img" src={name_bgc}></Image>
        </View>
        <View className="card-group group3">
          {netList.map((item) => (
            <View className="card-item" key={item.id}>
              <View className="corner-top-right"></View>
              <View className="corner-bottom-left"></View>
              <Text className="card-title">{item.professional}</Text>
              <Text className="card-box">
                <Text className="card-value">{item.kpiValue ?? 0}</Text>
                <Text className="card-kpiName">{item.kpiName ?? ''}</Text>
              </Text>
            </View>
          ))}
        </View>

        <View className="h_title">
          <Text className="h_title_text">业务感知情况</Text>
          <Image className="h_title_img" src={name_bgc}></Image>
        </View>
        <View className="card-group group2">
          {bizList.map((item) => (
            <View className="card-item" key={item.id}>
              <View className="corner-top-right"></View>
              <View className="corner-bottom-left"></View>
              <Text className="card-title">{item.professional}</Text>
              <Text className="card-box">
                <Text className="card-value">{item.kpiValue ?? 0}</Text>
                <Text className="card-kpiName">{item.kpiName ?? ''}</Text>
              </Text>
            </View>
          ))}
        </View>

        <View className="chatbox">
          <Image onClick={gochat} className="chatbox_img" src={mascot}></Image>
          <View className="chatlist">
            <View className="chatitem">当日监控工作事项，当日日报工作事项</View>
            <View className="chatitem">当日监控工作事项，当日日报工作事项</View>
            <View className="chatitem">当日监控工作事项，当日日报工作事项</View>
            <View className="chatitem">当日监控工作事项，当日日报工作事项</View>
          </View>
        </View>
      </View>
    </View>
  );
}
